<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据展示</title>
    <link rel="stylesheet" href="css/wodry.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/public.css">
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 30, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<style>
    @keyframes move {
        100% {
            transform: translateY(-220px);
        }
    }

    .aa {
        animation: move 10s linear infinite;
    }

    .aa:hover {
        animation-play-state: paused;
    }
</style>

<body>

    <div class="main" id="app">
        <div class="header">
            <div class="header-left fl" id="time" class="times"></div>
            <div class="header-center fl">
                <div class="header-title">
                    {{title}}数据大屏
                </div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl"></div>
            <div class="header-bottom fl"></div>

        </div>

        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <!-- <h1 id="ceshi">数据可视化</h1> -->
                    <div class="title">基本信息</div>
                    <div class="top-list" style="font-size: 1vw;">
                        <p>当你征服一座山峰时，它已经在你脚下了，你必须再找一座山峰去征服，否则，你只有下山，走下坡路了</p>
                        <ul id="message">
                            <li>成交额：${{Math.floor(form.Sales_Amount)}}</li>
                            <li>成交量：${{form.Quantity}}件</li>
                            <li>在线总数：${{form.TotalOnline}}</li>
                            <li>总包裹量：${{form.Packing}}件</li>
                            <li>在线商家：${{form.OnlineMerchants}}</li>
                            <li>已发件：${{form.SentItems}}件</li>
                        </ul>
                    </div>

                </div>
                <div class="right-top left-cen rightTop border">
                    <div class="title">包裹量排名</div>
                    <div class="echart wenzi"
                        style="overflow: hidden;height: 150px;display: flex;justify-content: center;">
                        <ul id="ceshi" style="width: 80%;margin-top: 50px;">
                            <li v-for="(item,index) in Package_Ranking" :key="index" class="wodryRX0"
                                style="font-size:13px;">
                                NO.{{index + 1}}
                                {{item.Sales_Address}}，包裹累计<span
                                    style="color:gold;">{{Math.floor(item.Quantity)}}</span>件
                                <span id="shop1"> {{item.Article_Name}}约占百分之<b
                                        style="color:gold;">{{Math.floor(item.Proportion)}}</b></span>
                            </li><br />
                        </ul>
                    </div>
                </div>
                <div class="left-bottom rightTop border">
                    <div class="title">全球贸易国家城市排行(Top5)</div>
                    <div class="bottom-b">
                        <div id="chart5" class="allnav"></div>
                    </div>

                </div>
            </div>
            <div class="center-cen fl">
                <div class="cen-top rightTop border">
                    <div class="top-bottom">
                        <div id="map" class="allnav" style="height: 4.4rem"></div>
                    </div>


                </div>
                <div class="cen-bottom rightTop border">
                    <div class="title">月统计</div>
                    <div class="bottom-b">
                        <div id="chart4" class="allnav"></div>
                    </div>

                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="title">商品销售排行</div>

                    <div class="echart wenzi">
                        <div class="gun">
                            <span>排名</span>
                            <span>商品名称</span>
                            <span>销量</span>
                        </div>
                        <div id="FontScroll" class="myscroll" style="overflow: hidden;">
                            <ul id="sales-line">
                                <li v-for="(item,index) in Sales_Ranking" :key="index"
                                    style="margin-bottom:10px;height:20px;line-height:20px">
                                    <div class="fontInner clearfix">
                                        <span>
                                            <b>{{index + 1}}</b>
                                        </span>
                                        <span style="font-size:15px">{{item.Article_Name}}</span>
                                        <span>{{Math.floor(item.Quantity)}}件</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="right-cen border">
                    <div class="title">商品分类占比</div>
                    <div class="right-cen-cent">
                        <div id="chart3" class="allnav"></div>
                    </div>

                </div>
                <div class="right-bottom rightTop border">
                    <div class="title">各平台占比</div>
                    <div class="chat">
                        <div id="chart2" class="allnav"></div>
                    </div>

                </div>
            </div>
        </div>


    </div>
    <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../../js/utils.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="js/wodry.min.js"></script>
    <script src="js/fontscroll.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>
    <script>
        var counter = 3000;
        var ulist = document.getElementById("ceshi").getElementsByTagName("li");
        for (var i = 0; i < ulist.length; i++) {
            var liclass = ulist[i].className;
            var a = $('.' + liclass + '').wodry({
                animation: 'rotateX',
                delay: counter,
                animationDuration: 1000
            });
            if (counter > 3050) {
                counter = 3000;
            } else {
                counter += 10;
            }
        }

        //顶部时间
        function getTime() {
            var myDate = new Date();
            var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
            var myToday = myDate.getDate(); //获取当前日(1-31)
            var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
            var myHour = myDate.getHours(); //获取当前小时数(0-23)
            var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
            var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var nowTime;

            nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
            $('#time').html(nowTime);
        };
        function fillZero(str) {
            var realNum;
            if (str < 10) {
                realNum = '0' + str;
            } else {
                realNum = str;
            }
            return realNum;
        }
        // setInterval(getTime, 1000);
        
    </script>

</body>

</html>
<script>
  
</script>